<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <!-- 表格顶部菜单 -->
        

        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <el-container>
            <el-aside width="400px">
                <ul v-infinite-scroll="getType" class="type-list" style="overflow: auto">
                    <li class="title">代码类型</li>
                    <li v-for="(item,index) in state.typeData" 
                    :key="item.CODETYPE" 
                    class="list-item"
                    :class="{active:state.currentType == item.CODETYPE}"
                    @click="handleTypeChange(item)"
                    >
                      <span class="index">{{ index+1 }}</span>  {{ item.CODENAME }}
                    </li>
                </ul>
            </el-aside>
            <el-main style="padding:0">
                <TableHeader
                    :buttons="['refresh', 'add', 'edit', 'delete', 'quickSearch', 'columnDisplay']"
                    :quick-search-placeholder="t('quick Search Placeholder', { fields: t('codelib.quick Search Fields') })"
                />
                <Table ref="tableRef" />
            </el-main>
        </el-container>

        <!-- 表单 -->
        <PopupForm />
    </div>
</template>

<script setup lang="ts">
import { ref, provide, onMounted ,reactive } from 'vue'
import baTableClass from '/@/utils/baTable'
import { codelib } from '/@/api/controllerUrls'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'

const { t } = useI18n()

const state:{
    currentType:string
    typeData:any[]
    page:number

} = reactive({
    currentType:'',
    typeData:[],
    page:0
})

const tableRef = ref()
const optButtons = defaultOptButtons(["edit","delete"])
const baTable = new baTableClass(
    new baTableApi(codelib),
    {
        pk: 'CODETYPE',
        column: [
            { type: 'selection', align: 'center', operator: false },
            // { label: t('codelib.CODETYPE'), prop: 'CODETYPE', align: 'center' },
            { label: t('codelib.CODE'), prop: 'CODE', align: 'center' },
            { label: t('codelib.REMIND'), prop: 'REMIND', align: 'center' },
            { label: t('codelib.CODENAME'), prop: 'CODENAME', align: 'center' },
            // { label: t('codelib.INOUT'), prop: 'INOUT', align: 'center' },
            { label: t('codelib.ATTR'), prop: 'ATTR', align: 'center' },
            // { label: t('codelib.VALID'), prop: 'VALID', align: 'center' },
            { label: t('codelib.REMARK'), prop: 'REMARK', align: 'center' },
            // { label: t('codelib.OP'), prop: 'OP', align: 'center' },
            // { label: t('codelib.OPTIME'), prop: 'OPTIME', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160 },
            { label: t('operate'), align: 'center', width: 100, render: 'buttons', buttons: optButtons, operator: false },
        ],
        dblClickNotEditColumn: [undefined, ],
        defaultOrder: { prop: 'CODETYPE', order: 'desc' },
    },
    {
        defaultItems: [],
    }
)

provide('baTable', baTable)



onMounted(() => {
    getType()
    return
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})



const getType = ()=>{
    state.page ++
    createAxios({
        url:'/admin/codetype/index',
        params:{
            limit:20,
            page:state.page
        }
    }).then((res:any)=>{
        state.typeData.push(...res.data.list)
        if(!state.currentType){
            handleTypeChange(state.typeData[0])
        }
    })
}


const handleTypeChange = (item:any)=>{
    state.currentType = item.CODETYPE
    baTable.table.filter!.type = state.currentType
    baTable.getIndex()
}




</script>

<script lang="ts">
import { defineComponent } from 'vue'
import createAxios from '/@/utils/axios'
export default defineComponent({
    name: 'codelib',
})
</script>

<style scoped lang="scss">
.el-container{
    background: #fff;
}
.el-aside{
    padding: 12px 20px 20px;
}
.type-list{
    height: calc( 100vh -  130px);
    border: 1px solid #eee;
    li{
        padding: 12px 12px;
        list-style: none;
        &.title{
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            color: #fff;
            background: var(--el-color-primary);
        }
        &.list-item{
            font-size: 14px;
            cursor: pointer;
            border-bottom: 1px solid #eee;
            &:hover{
                background: #eee;
            }
            .index{
                display: inline-block;
                width: 40px;
                text-align: center;
            }
            &.active{
                background: #eee;
                font-weight: bold;
            }
        }
    }
}

</style>
